import React, { useEffect, useState } from "react"
import { Image, PullToRefresh, Toast, Card, SearchBar } from 'antd-mobile'
import { httpJson } from "../../../services/http"
import UserOrderCard from "../components/user-order-card"

const UserOrderList: React.FC = () => {
    const [list, setList] = useState<any>([])
    const [loading, setLoading] = useState<boolean>(false)
    const getMerchantList = async () => {
        setLoading(true)
        httpJson('GET', '/api/order/getUserOrderList')
            .then((res: any) => {
                setList(res.data.data)
                setLoading(false)
            })
            .catch(err => {
                console.log(err)
                setLoading(false)
            })
    }
    useEffect(() => {
        getMerchantList()
    }, [])
    return (
        <>
            <SearchBar
                placeholder='请输入内容'
                showCancelButton
                style={{
                    '--border-radius': '100px',
                    '--background': '#ffffff',
                    'margin': '8px'
                }}
            />
            <PullToRefresh
                onRefresh={getMerchantList}
            >
                {list && list.length > 0 &&
                list.map((item: any) => {
                    return <UserOrderCard props={item} />
                })
            }
            {
                !loading && !list.length && (
                    <p style={{ maxHeight: 800, minHeight: 600, textAlign: 'center', fontSize: 20, color: '#999', lineHeight: 20 }}>暂无数据...</p>
                )
            }
            </PullToRefresh>
        </>
    )
}

export default UserOrderList